<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright"  />
<title></title>
<link rel="stylesheet" type="text/css" href="../easyui/1.5.3/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../css/wu.css" />
<link rel="stylesheet" type="text/css" href="../css/icon.css" />
<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
<script type="text/javascript" src="../easyui/1.5.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../easyui/1.5.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<div class="easyui-layout" data-options="fit:true">
		<div data-options="region:'west',split:true" title:"west" style="width:200px;">
			<ul id="tt"></ul>
			<div style="width:100%;display: flex;justify-content: center;">
				<a href="javascript:void(0)" onclick="addRootNode()">添加根节点</a>&nbsp;&nbsp;
				<a href="javascript:void(0)" onclick="editNode()">修改</a>&nbsp;&nbsp;
				<a href="javascript:void(0)" onclick="remove()">删除</a>
			</div>
		</div>
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
			<form id="ff" class="easyui-form"   method="post" data-options="novalidate:true">
				
				<input type="text" name="parentId" id="parentId" style="display:none;">
			    <div style="margin-bottom:20px">
			        <input class="easyui-textbox"  name="text" style="width:100%" data-options="label:'分类名称:',required:true" />
			    </div>

			    
			</form>
			
			<div style="text-align:center;padding:5px 0;">
				<a href="javascript:;" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
				<a href="javascript:;" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
			</div>
		</div>
		
	</div>
	
    <script type="text/javascript">
    	var nodeId = null;
    	
		$('#tt').tree({
			animate:true,
		    url:'http://localhost:3000/cate/list',
		    method:'get',
			onClick: function(node){
				$('#parentId').val(node._id);
			}

		});
		
		function remove(){
			var node = $('#tt').tree('getSelected');
			var id = node._id;
			
			$.ajax({
				type:"delete",
				url:"http://localhost:3000/cate/data/"+id
			}).then(function(res){
				$("#tt").tree('reload');
			})
		}
		
		function editNode(){
			var node = $('#tt').tree('getSelected');
			nodeId = node._id;
			$('#ff').form('load',node)
		}
		
		
		function addRootNode(){
			$('#parentId').val(null);
			nodeId=null;
		}
		
		function submitForm(){
			$('#ff').form('submit',{
				onSubmit:function(){
					if($(this).form('enableValidation').form('validate')){
						var posturl;
						if(nodeId !==null){
							posturl = 'http://localhost:3000/cate/data/' + nodeId;
						}else{
							posturl = 'http://localhost:3000/cate/data';
						}
						
						var formData = $('#ff').serializeJSON();
						if(formData.parentId.length === 0){
							delete formData.parentId;
						}
						$.ajax({
							type:"post",
							url:posturl,
							data:formData
						}).then(function(res){
							$('#tt').tree('reload');
						})
					}else{
						alert('表单验证失败')
					}
				}
				
			});
		}
		function clearForm(){
			$('#ff').form('clear');
		}
	</script>
</body>
</html>
